import usePutCommentary from "@/app/[language]/commentary/query/usePutCommentary";
import useWipeCommentary from "@/app/[language]/commentary/query/useWipeCommentary";
import { GetCommentaryAPI } from "@/type/wwwAPI";
import { useTranslations } from "next-intl";
import { useState } from "react";
import { PencilFill, TrashFill } from "react-bootstrap-icons";
import Button from "react-bootstrap/Button";
import ButtonGroup from "react-bootstrap/ButtonGroup";
import Col from "react-bootstrap/Col";
import FormControl from "react-bootstrap/FormControl";
import InputGroup from "react-bootstrap/InputGroup";
import InputGroupText from "react-bootstrap/InputGroupText";
import Row from "react-bootstrap/Row";
import Stack from "react-bootstrap/Stack";
import ReactTextareaAutosize from "react-textarea-autosize";
import { toast } from "react-toastify";
import { getDatetime } from "taehui-ts/date";

export default function CommentaryItem({
  commentary: { commentaryID, avatarName, text, date },
}: {
  commentary: GetCommentaryAPI[number];
}) {
  const t = useTranslations();

  const [isModifyOpened, setModifyOpened] = useState(false);
  const [avatarCipher, setAvatarCipher] = useState("");
  const [textInput, setTextInput] = useState("");

  const { mutateAsync: wipeCommentary } = useWipeCommentary();
  const { mutateAsync: putCommentary } = usePutCommentary();

  if (isModifyOpened) {
    return (
      <Row>
        <Stack gap={2}>
          <InputGroup>
            <InputGroupText>{avatarName}</InputGroupText>
            <FormControl
              as={ReactTextareaAutosize}
              value={textInput}
              isValid={!!textInput}
              isInvalid={!textInput}
              placeholder={t("text")}
              onChange={({ target: { value } }) => setTextInput(value)}
            />
            <InputGroupText suppressHydrationWarning>
              {getDatetime(date)}
            </InputGroupText>
          </InputGroup>
          <InputGroup>
            <InputGroupText>{t("avatarCipher")}</InputGroupText>
            <FormControl
              type="password"
              value={avatarCipher}
              isInvalid={!avatarCipher}
              placeholder={t("avatarCipher")}
              onChange={({ target: { value } }) => setAvatarCipher(value)}
            />
            <Button
              variant="warning"
              onClick={async () => {
                if (avatarCipher && textInput) {
                  await putCommentary({
                    commentaryID,
                    avatarCipher,
                    text: textInput,
                  });
                  setModifyOpened(false);
                } else {
                  toast.error(t("failedValidation"));
                }
              }}
            >
              <PencilFill />
            </Button>
          </InputGroup>
        </Stack>
      </Row>
    );
  }

  const isLoading = !(commentaryID >= 0);

  return (
    <Row className="flex-nowrap">
      <Col xs="auto">{avatarName}</Col>
      <Col className="cc">
        <span>{text}</span>
      </Col>
      <Col xs="auto">
        <Stack gap={2}>
          {getDatetime(date)}
          <ButtonGroup>
            <Button
              disabled={isLoading}
              variant="warning"
              onClick={() => {
                setTextInput(text);
                setModifyOpened(true);
              }}
            >
              <PencilFill />
            </Button>
            <Button
              disabled={isLoading}
              variant="danger"
              onClick={async () => {
                if (avatarCipher) {
                  await wipeCommentary({ commentaryID, avatarCipher });
                } else {
                  toast.error(t("failedValidation"));
                }
              }}
            >
              <TrashFill />
            </Button>
          </ButtonGroup>
        </Stack>
      </Col>
    </Row>
  );
}